<template>
  <div class="page-select">
    <div class="action-button" @click="addCurrentDate(-1)"><LeftOutlined /></div>
    <div
      :class="{
        'date-item': true,
        'active-item': currentDate.format('YYYY-MM-DD') === item.value
      }"
      v-for="item in dateList"
      :key="item.value"
      @click="changeCurrentDate(item.value)"
    >
      <p>{{ item.label }}</p>
      <p>{{ item.value }}</p>
    </div>
    <div class="action-button" @click="addCurrentDate(1)"><RightOutlined /></div>
    <div class="calendar-button">
      <a-popover trigger="click">
        <template #content>
          <a-calendar
            class="calendar-box"
            v-model:value="currentDate"
            :fullscreen="false"
            :locale="locale"
          >
            <template #headerRender="{ value: current, onChange }">
              <div style="padding: 10px">
                <a-row type="flex" justify="space-between">
                  <a-col>
                    <a-select
                      size="small"
                      :dropdown-match-select-width="false"
                      class="my-year-select"
                      :value="String(current.year())"
                      @change="
                        (newYear: string | number) => {
                          onChange(current.year(+newYear))
                        }
                      "
                    >
                      <a-select-option
                        v-for="val in getYears(current)"
                        :key="String(val)"
                        class="year-item"
                      >
                        {{ val }}
                      </a-select-option>
                    </a-select>
                    <a-select
                      size="small"
                      :dropdown-match-select-width="false"
                      :value="String(current.month())"
                      style="margin-left: 8px"
                      @change="
                        (selectedMonth: any) => {
                          onChange(current.month(parseInt(String(selectedMonth), 10)))
                        }
                      "
                    >
                      <a-select-option
                        v-for="(val, index) in getMonths(current)"
                        :key="String(index)"
                        class="month-item"
                      >
                        {{ val }}
                      </a-select-option>
                    </a-select>
                  </a-col>
                  <a-col />
                </a-row>
              </div>
            </template>
          </a-calendar>
        </template>
        <CalendarOutlined class="calendar-icon" />
      </a-popover>
    </div>
    <div class="add-button">
      <a-button type="primary" :icon="h(PlusOutlined)" @click="handleAddPlace">预定场地</a-button>
    </div>
  </div>
</template>
<script setup lang="ts" name="HomeTopCalendar">
import { LeftOutlined, RightOutlined, CalendarOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { computed, ref, h } from 'vue'
import dayjs, { Dayjs } from 'dayjs'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import 'dayjs/locale/zh-cn'
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(relativeTime)
dayjs.locale('zh-cn')
import type { DateItem } from '#/reserve-home'

const emit = defineEmits(['handleCurrentDateChange', 'handleAddPlace'])

const currentDate = ref(dayjs())
const dateList = computed(() => {
  const dateListSource: DateItem[] = []
  for (let i = 0; i < 7; i++) {
    const dateItem = currentDate.value.add(i, 'day')
    dateListSource.push({
      value: dateItem.format('YYYY-MM-DD'),
      label: dateItem.format('dddd')
    })
  }
  return dateListSource
})

const addCurrentDate = (addCount: number) => {
  const dateItem = currentDate.value.add(addCount, 'day').format('YYYY-MM-DD')
  changeCurrentDate(dateItem)
}

const changeCurrentDate = (date: string) => {
  currentDate.value = dayjs(date)
  emit('handleCurrentDateChange', currentDate.value.format('YYYY-MM-DD'))
}

const handleAddPlace = () => {
  emit('handleAddPlace')
}

const getMonths = (value: any) => {
  const localeData = value.localeData()
  const months = []
  for (let i = 0; i < 12; i++) {
    months.push(localeData.monthsShort(value.month(i)))
  }
  return months
}

const getYears = (value: Dayjs) => {
  const year = value.year()
  const years = []
  for (let i = year - 10; i < year + 10; i += 1) {
    years.push(i)
  }
  return years
}
</script>
<style lang="less" scoped>
.action-button {
  width: 30px;
  color: var(--active-color);
}

.date-item {
  flex-direction: column;
  width: 120px;
}

.action-button,
.date-item {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  margin-right: 8px;
  height: 60px;
  cursor: pointer;
  &:hover {
    border-color: var(--active-color);
  }
}

.active-item {
  border-color: var(--active-color);
  color: var(--active-color);
  background: var(--active-background);
}

.calendar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  height: 60px;
  width: 40px;
  font-size: 24px;
  color: #666666;
  .calendar-icon {
    cursor: pointer;
    &:hover {
      color: var(--active-color);
    }
  }
}

.calendar-box {
  width: 300px;
}

.add-button {
  display: flex;
  align-items: center;
  justify-content: end;
  flex: 1 0 auto;
  width: 100px;
  height: 100%;
}
</style>
